<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 响应式实用工具</title>
<link rel="stylesheet" href="bootstrap/3.3.7/css/bootstrap.min.css">
<script src="jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

	<div class="container" style="padding: 40px;">
		<div class="row visible-on">
			<div class="col-xs-6 col-sm-3"
				style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
				<span class="hidden-xs">特别小型</span> <span class="visible-xs">✔
					在特别小型设备上可见</span>
			</div>
			<div class="col-xs-6 col-sm-3"
				style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
				<span class="hidden-sm">小型</span> <span class="visible-sm">✔
					在小型设备上可见</span>
			</div>
			<div class="clearfix visible-xs"></div>
			<div class="col-xs-6 col-sm-3"
				style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
				<span class="hidden-md">中型</span> <span class="visible-md">✔
					在中型设备上可见</span>
			</div>
			<div class="col-xs-6 col-sm-3"
				style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
				<span class="hidden-lg">大型</span> <span class="visible-lg">✔
					在大型设备上可见</span>
			</div>
		</div>
	</div>

</body>
</html>